<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" :inline="true">
      <el-form-item label="姓名" prop="name">
        <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期" prop="birth">
        <div class="block">
          <el-date-picker v-model="form.birth" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="地址" prop="addr">
        <el-input placeholder="请输入地址" v-model="form.addr"></el-input>
      </el-form-item>
    </el-form>
    <!-- <el-dialog> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="changesdia(false), resetForm('form')">取消</el-button>
      <el-button type="primary" @click="changesdia(false), submitForm('form')">确定</el-button>
    </span>
    <!-- </el-dialog> -->
  </div>
</template>
<!-- 
{
  model: 'name',
  label: '姓名',
  type: 'input'
},
{
  model: 'age',
  label: '年龄',
  type: 'input'
},
{
  model: 'sex',
  label: '性别',
  type: 'select',
  opts: [
    {
      label: '男',
      value: 1
    },
    {
      label: '女',
      value: 2
    }
  ]
},
{
  model: 'birth',
  label: '出生年龄',
  type: 'input'
},
{
  model: 'addr',
  label: '家庭住址',
  type: 'input'
}, -->
<script>
import { mapState, mapMutations } from 'vuex'
import { addUser, getUser, updateUser } from '@/api/index.js'
export default {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        birth: [{ required: true, message: '请选择日期', trigger: 'change' }],
        addr: [{ required: true, message: '请输入地址', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState({
      modelType: state => state.tab.modelType,
      form: state => state.tab.form
    })
  },
  methods: {
    ...mapMutations(['changedialogVisible', 'gettableData']),
    gettablelist() {
      getUser().then(({ data }) => {
        this.gettableData(data)
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.modelType === 0) {
            addUser(this.form).then(() => {
              this.gettablelist()
            })
          } else {
            updateUser(this.form).then(() => {
              this.gettablelist()
            })
          }
          this.resetForm('form')
        } else {
          alert('error!')
          this.changedialogVisible(true)
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    changesdia(val) {
      this.changedialogVisible(val)
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
